<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!--        <el-form-item label="库存编号" prop="stockId">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.stockId"-->
      <!--            placeholder="请输入库存编号"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <el-form-item label="产线编号" prop="GropSc">
        <el-input
          v-model="queryParams.GropSc"
          placeholder="请输入产线编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品型号" prop="BARCODE">
        <el-input
          v-model="queryParams.BARCODE"
          placeholder="请输入产品型号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="入库单号" prop="putinId">
        <el-input
          v-model="queryParams.putinId"
          placeholder="请输入出库单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!--        <el-form-item label="仓库编号" prop="storageId">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.storageId"-->
      <!--            placeholder="请输入仓库编号"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="库区编号" prop="areaId">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.areaId"-->
      <!--            placeholder="请输入库区编号"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <el-form-item label="库位编号" prop="locationId">
        <el-input
          v-model="queryParams.locationId"
          placeholder="请输入库位编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--        <el-form-item label="物料类别编号" prop="goodsTypeid">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.goodsTypeid"-->
      <!--            placeholder="请输入物料类别编号"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <el-form-item label="物料编号" prop="goodsId">
        <el-input
          v-model="queryParams.goodsId"
          placeholder="请输入物料编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="托盘号" prop="ctl">
        <el-input
          v-model="queryParams.ctl"
          placeholder="请输入托盘号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="库存数量" prop="shelvesNum">
        <el-input
          v-model="queryParams.shelvesNum"
          placeholder="请输入出库数量"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="PO" prop="PO">
        <el-input
          v-model="queryParams.PO"
          placeholder="请输入PO"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="SO" prop="SO">
        <el-input
          v-model="queryParams.SO"
          placeholder="请输入SO"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="MID" prop="ITEM">
        <el-input
          v-model="queryParams.ITEM"
          placeholder="请输入MID"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!--        <el-form-item label="供应商" prop="providerId">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.providerId"-->
      <!--            placeholder="请输入供应商"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="生产日期" prop="productionDate">-->
      <!--          <el-date-picker clearable-->
      <!--                          v-model="queryParams.productionDate"-->
      <!--                          type="date"-->
      <!--                          value-format="yyyy-MM-dd"-->
      <!--                          placeholder="请选择生产日期">-->
      <!--          </el-date-picker>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="上架时间" prop="wareDate">-->
      <!--          <el-date-picker clearable-->
      <!--                          v-model="queryParams.wareDate"-->
      <!--                          type="date"-->
      <!--                          value-format="yyyy-MM-dd"-->
      <!--                          placeholder="请选择上架时间">-->
      <!--          </el-date-picker>-->
      <!--        </el-form-item>-->

      <el-form-item label="上架时间" prop="wareDates">
        <el-date-picker
          clearable
          v-model="queryParams.wareDates"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期时间"
          end-placeholder="结束日期时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择上架时间范围">
        </el-date-picker>
      </el-form-item>

      <!--        <el-form-item label="单据编号" prop="DOCCTNUMBER">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.DOCCTNUMBER"-->
      <!--            placeholder="请输入单据编号"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="通知单号" prop="noticeId">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.noticeId"-->
      <!--            placeholder="请输入通知单号"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->


      <!--        <el-form-item label="客户id" prop="customerId">-->
      <!--          <el-input-->
      <!--            v-model="queryParams.customerId"-->
      <!--            placeholder="请输入客户id"-->
      <!--            clearable-->
      <!--            @keyup.enter.native="handleQuery"-->
      <!--          />-->
      <!--        </el-form-item>-->

      <el-form-item label="物料名称" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入物料名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="STS">
        <el-select v-model="queryParams.STS" placeholder="请选择状态" clearable>
          <el-option
            v-for="dict in dict.type.kc_sts"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      </el-form-item>
      <div class="float-right-container">
        <div class="chart-container">
          <div class="bar-container">
            <div class="bar" style="background-color: #c6f1aa; height: 20px;"></div>
            <div class="label">正常</div>
          </div>
          <div class="bar-container">
            <div class="bar" style="background-color: #ead6a3; height: 20px;"></div>
            <div class="label">占用</div>
          </div>
          <div class="bar-container">
            <div class="bar" style="background-color: #ec949b; height: 20px;"></div>
            <div class="label">锁定</div>
          </div>
        </div>
      </div>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--        <el-col :span="1.5">-->
      <!--          <el-button-->
      <!--            type="primary"-->
      <!--            plain-->
      <!--            icon="el-icon-plus"-->
      <!--            size="mini"-->
      <!--            @click="handleAdd"-->
      <!--            v-hasPermi="['system:STOCK:add']"-->
      <!--          >新增</el-button>-->
      <!--        </el-col>-->
      <!--        <el-col :span="1.5">-->
      <!--          <el-button-->
      <!--            type="success"-->
      <!--            plain-->
      <!--            icon="el-icon-edit"-->
      <!--            size="mini"-->
      <!--            :disabled="single"-->
      <!--            @click="handleUpdate"-->
      <!--            v-hasPermi="['system:STOCK:edit']"-->
      <!--          >修改</el-button>-->
      <!--        </el-col>-->
      <!--        <el-col :span="1.5">-->
      <!--          <el-button-->
      <!--            type="danger"-->
      <!--            plain-->
      <!--            icon="el-icon-delete"-->
      <!--            size="mini"-->
      <!--            :disabled="multiple"-->
      <!--            @click="handleDelete"-->
      <!--            v-hasPermi="['system:STOCK:remove']"-->
      <!--          >删除</el-button>-->
      <!--        </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="danger"
          size="medium"
          :disabled="multiple"
          @click="clickIce(2)"
        >锁定
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="success"
          size="medium"
          :disabled="multiple"
          @click="clickIce(0)"
        >解锁
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="warning"
          size="medium"
          @click="handleExport()"
        >导出
        </el-button>
      </el-col>

      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>

    </el-row>

    <el-table border
              ref="filterTable" v-loading="loading" :data="STOCKList" :summary-method="getSummaries" show-summary
              :row-style="rowStyle" @selection-change="handleSelectionChange1">

      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column
        fixed
        type="index"
        label="行号"
        width="60"
        align="center"
      />
      <el-table-column label="产线编号" align="center" prop="gropSc"/>
      <el-table-column label="产品型号" align="center" prop="barcode"/>
      <!--       <el-table-column sortable fixed label="库存编号" align="center" prop="stockId" />-->
      <el-table-column label="入库单号" align="center" prop="putinId"/>
      <!--        <el-table-column label="洒洒水" align="center" prop="putinIdLine" />-->
      <!--        <el-table-column label="仓库编号" align="center" prop="storageId" />-->
      <!--        <el-table-column label="库区编号" align="center" prop="areaId" />-->
      <el-table-column label="库位编号" align="center" prop="locationId"/>
      <el-table-column label="托盘号" align="center" prop="ctl"/>
      <!--        <el-table-column label="商品类别编号" align="center" prop="goodsTypeid" />-->
      <el-table-column label="物料编号" align="center" prop="goodsId"/>
      <el-table-column label="物料名称" align="center" prop="goodsName"/>
      <el-table-column label="库存数量" align="center" prop="shelvesNum"/>
      <el-table-column label="储位" align="center" prop="stnr"/>
      <el-table-column label="订单编号" align="center" prop="trno"/>
      <el-table-column label="花序" align="center" prop="article"/>
      <el-table-column label="数量" align="center" prop="qty"/>
      <el-table-column label="PO" align="center" prop="po"/>
      <el-table-column label="SO" align="center" prop="so"/>
      <el-table-column label="MID" align="center" prop="item"/>
      <el-table-column label="订单编号" align="center" prop="ordno"/>
      <el-table-column label="尺寸" align="center" prop="cussize"/>
      <el-table-column label="材料编号" align="center" prop="itnbr"/>
      <el-table-column label="材料名称" align="center" prop="itdsc"/>
      <!--        <el-table-column label="备注" align="center" prop="REMARK" />-->
      <!--        <el-table-column label="版本号" align="center" prop="VERSION" />-->
      <!--        <el-table-column label="入库类型" align="center" prop="storageMode" />-->
      <!--        <el-table-column label="供应商" align="center" prop="providerId" />-->
      <el-table-column label="下线时间" align="center" prop="productionDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上架时间" align="center" prop="wareDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.wareDate, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
      <!--        <el-table-column fixed="right" label="单据编号" align="center" prop="DOCCTNUMBER" />-->
      <!--        <el-table-column label="商品体积" align="center" prop="GOODSVOLUME" />-->
      <!--        <el-table-column label="已占用数量" align="center" prop="occupyNum" />-->
      <!--        <el-table-column label="通知单号" align="center" prop="noticeId" />-->
      <!--        <el-table-column label="图号" align="center" prop="oriBill" />-->

      <!--        <el-table-column label="条形码" align="center" prop="BARCODE" />-->
      <!--        <el-table-column label="客户id" align="center" prop="customerId" />-->
      <!--        <el-table-column label="物料sku" align="center" prop="goodsSku" />-->
      <!--        <el-table-column label="locIdName" align="center" prop="locIdName" />-->
      <!--        <el-table-column label="wgh" align="center" prop="wgh" />-->

      <!--        <el-table-column label="包装类型" align="center" prop="boxType" />-->

      <!--        <el-table-column label="产品目录" align="center" prop="ProDucLotId" />-->
      <!--        <el-table-column label="Whseloc" align="center" prop="Whseloc" />-->
      <!--        <el-table-column label="高" align="center" prop="HIGH" />-->
      <el-table-column label="状态" align="center" prop="STS">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.kc_sts" :value="scope.row.sts"/>
        </template>
      </el-table-column>
      <!--        <el-table-column label="价格" align="center" prop="PRICE" />-->
      <!--        <el-table-column label="问题" align="center" prop="PROBLEM" />-->
      <!--        <el-table-column label="顺序编码" align="center" prop="orderNum" />-->
      <!--        <el-table-column label="客户" align="center" prop="CUSTOMER" />-->
      <!--        <el-table-column label="备注2" align="center" prop="REMARK2" />-->
      <!--        <el-table-column label="ONSHELFUSERID" align="center" prop="ONSHELFUSERID" />-->
      <!--        <el-table-column label="PARTDESC" align="center" prop="PARTDESC" />-->
      <!--        <el-table-column label="HASVOLUME" align="center" prop="HASVOLUME" />-->
      <!--        <el-table-column label="仓库ID" align="center" prop="warehousingId" />-->
      <!--        <el-table-column label="upgoodsId" align="center" prop="upgoodsId" />-->
      <!--        <el-table-column label="条形码" align="center" prop="BarCodeTpe" />-->
      <!--        <el-table-column label="BarCodef" align="center" prop="BarCodef" />-->
      <!--        <el-table-column label="GropSc" align="center" prop="GropSc" />-->
      <!--        <el-table-column label="lx" align="center" prop="lx" />-->
      <!--        <el-table-column label="净重" align="center" prop="netWeigh" />-->
      <!--        <el-table-column label="stsErp" align="center" prop="stsErp" />-->
      <!--        <el-table-column label="stsDj" align="center" prop="stsDj" />-->
      <!--        <el-table-column label="规格" align="center" prop="SPECIFICATION" />-->
      <!--        <el-table-column label="gltrp" align="center" prop="gltrp" />-->
      <!--        <el-table-column label="goodsMeasureId" align="center" prop="goodsMeasureId" />-->
      <!--        <el-table-column label="SAPMSG" align="center" prop="SAPMSG" />-->
      <!--        <el-table-column label="VKBUR" align="center" prop="VKBUR" />-->
      <!--        <el-table-column label="KUNAG" align="center" prop="KUNAG" />-->
      <!--        <el-table-column label="ZVKBUR" align="center" prop="ZVKBUR" />-->
      <!--        <el-table-column label="ZKUNAG" align="center" prop="ZKUNAG" />-->
      <!--        <el-table-column label="ZSOURCE" align="center" prop="ZSOURCE" />-->
      <!--        <el-table-column label="QTBY1" align="center" prop="QTBY1" />-->
      <!--        <el-table-column label="QTBY2" align="center" prop="QTBY2" />-->
      <!--        <el-table-column label="QTBY3" align="center" prop="QTBY3" />-->
      <!--        <el-table-column label="QTBY4" align="center" prop="QTBY4" />-->
      <!--        <el-table-column label="QTBY5" align="center" prop="QTBY5" />-->
      <!--        <el-table-column label="QTBY6" align="center" prop="QTBY6" />-->
      <!--        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
      <!--          <template slot-scope="scope">-->
      <!--            <el-button-->
      <!--              size="mini"-->
      <!--              type="text"-->
      <!--              icon="el-icon-edit"-->
      <!--              @click="handleUpdate(scope.row)"-->
      <!--              v-hasPermi="['system:STOCK:edit']"-->
      <!--            >修改</el-button>-->
      <!--            <el-button-->
      <!--              size="mini"-->
      <!--              type="text"-->
      <!--              icon="el-icon-delete"-->
      <!--              @click="handleDelete(scope.row)"-->
      <!--              v-hasPermi="['system:STOCK:remove']"-->
      <!--            >删除</el-button>-->
      <!--          </template>-->
      <!--        </el-table-column>-->

    </el-table>

    <!--    <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />-->

    <!-- 添加或修改【请填写功能名称】对话框 -->
    <!--      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>-->
    <!--        <el-form ref="form" :model="form" :rules="rules" label-width="80px">-->
    <!--          <el-form-item label="洒洒水" prop="stockId">-->
    <!--            <el-input v-model="form.stockId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="putinId">-->
    <!--            <el-input v-model="form.putinId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="putinIdLine">-->
    <!--            <el-input v-model="form.putinIdLine" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="storageId">-->
    <!--            <el-input v-model="form.storageId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="areaId">-->
    <!--            <el-input v-model="form.areaId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="locationId">-->
    <!--            <el-input v-model="form.locationId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="goodsTypeid">-->
    <!--            <el-input v-model="form.goodsTypeid" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="goodsId">-->
    <!--            <el-input v-model="form.goodsId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="shelvesNum">-->
    <!--            <el-input v-model="form.shelvesNum" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="REMARK">-->
    <!--            <el-input v-model="form.REMARK" type="textarea" placeholder="请输入内容" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="VERSION">-->
    <!--            <el-input v-model="form.VERSION" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="storageMode">-->
    <!--            <el-input v-model="form.storageMode" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="providerId">-->
    <!--            <el-input v-model="form.providerId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="productionDate">-->
    <!--            <el-date-picker clearable-->
    <!--                            v-model="form.productionDate"-->
    <!--                            type="date"-->
    <!--                            value-format="yyyy-MM-dd"-->
    <!--                            placeholder="请选择洒洒水">-->
    <!--            </el-date-picker>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="wareDate">-->
    <!--            <el-date-picker clearable-->
    <!--                            v-model="form.wareDate"-->
    <!--                            type="date"-->
    <!--                            value-format="yyyy-MM-dd"-->
    <!--                            placeholder="请选择洒洒水">-->
    <!--            </el-date-picker>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="DOCCTNUMBER">-->
    <!--            <el-input v-model="form.DOCCTNUMBER" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="noticeId">-->
    <!--            <el-input v-model="form.noticeId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="oriBill">-->
    <!--            <el-input v-model="form.oriBill" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="CTL">-->
    <!--            <el-input v-model="form.CTL" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="BARCODE">-->
    <!--            <el-input v-model="form.BARCODE" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="customerId">-->
    <!--            <el-input v-model="form.customerId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="goodsSku">-->
    <!--            <el-input v-model="form.goodsSku" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="locIdName">-->
    <!--            <el-input v-model="form.locIdName" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="wgh">-->
    <!--            <el-input v-model="form.wgh" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="goodsName">-->
    <!--            <el-input v-model="form.goodsName" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="ProDucLotId">-->
    <!--            <el-input v-model="form.ProDucLotId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="Whseloc">-->
    <!--            <el-input v-model="form.Whseloc" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="HIGH">-->
    <!--            <el-input v-model="form.HIGH" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="STS">-->
    <!--            <el-input v-model="form.STS" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="PRICE">-->
    <!--            <el-input v-model="form.PRICE" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="PROBLEM">-->
    <!--            <el-input v-model="form.PROBLEM" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="orderNum">-->
    <!--            <el-input v-model="form.orderNum" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="CUSTOMER">-->
    <!--            <el-input v-model="form.CUSTOMER" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="REMARK2">-->
    <!--            <el-input v-model="form.REMARK2" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="ONSHELFUSERID">-->
    <!--            <el-input v-model="form.ONSHELFUSERID" type="textarea" placeholder="请输入内容" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="PARTDESC">-->
    <!--            <el-input v-model="form.PARTDESC" type="textarea" placeholder="请输入内容" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="HASVOLUME">-->
    <!--            <el-input v-model="form.HASVOLUME" type="textarea" placeholder="请输入内容" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="warehousingId">-->
    <!--            <el-input v-model="form.warehousingId" type="textarea" placeholder="请输入内容" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="upgoodsId">-->
    <!--            <el-input v-model="form.upgoodsId" type="textarea" placeholder="请输入内容" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="BarCodeTpe">-->
    <!--            <el-input v-model="form.BarCodeTpe" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="BarCodef">-->
    <!--            <el-input v-model="form.BarCodef" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="GropSc">-->
    <!--            <el-input v-model="form.GropSc" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="lx">-->
    <!--            <el-input v-model="form.lx" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="netWeigh">-->
    <!--            <el-input v-model="form.netWeigh" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="stsErp">-->
    <!--            <el-input v-model="form.stsErp" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="stsDj">-->
    <!--            <el-input v-model="form.stsDj" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="SPECIFICATION">-->
    <!--            <el-input v-model="form.SPECIFICATION" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="gltrp">-->
    <!--            <el-input v-model="form.gltrp" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="goodsMeasureId">-->
    <!--            <el-input v-model="form.goodsMeasureId" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="SAPMSG">-->
    <!--            <el-input v-model="form.SAPMSG" type="textarea" placeholder="请输入内容" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="VKBUR">-->
    <!--            <el-input v-model="form.VKBUR" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="KUNAG">-->
    <!--            <el-input v-model="form.KUNAG" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="ZVKBUR">-->
    <!--            <el-input v-model="form.ZVKBUR" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="ZKUNAG">-->
    <!--            <el-input v-model="form.ZKUNAG" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="ZSOURCE">-->
    <!--            <el-input v-model="form.ZSOURCE" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="QTBY1">-->
    <!--            <el-input v-model="form.QTBY1" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="QTBY2">-->
    <!--            <el-input v-model="form.QTBY2" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="QTBY3">-->
    <!--            <el-input v-model="form.QTBY3" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="QTBY4">-->
    <!--            <el-input v-model="form.QTBY4" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="QTBY5">-->
    <!--            <el-input v-model="form.QTBY5" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="洒洒水" prop="QTBY6">-->
    <!--            <el-input v-model="form.QTBY6" placeholder="请输入洒洒水" />-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--        <div slot="footer" class="dialog-footer">-->
    <!--          <el-button type="primary" @click="submitForm">确 定</el-button>-->
    <!--          <el-button @click="cancel">取 消</el-button>-->
    <!--        </div>-->
    <!--      </el-dialog>-->
  </div>
</template>
<style>
.float-right-container {
  float: right; /* 容器向右浮动 */
  clear: both; /* 清除浮动，避免影响后续元素 */
}

.chart-container {
  display: flex;
  align-items: center; /* 使所有条形图和标签垂直居中 */
  gap: 10px; /* 条形图之间的间隔 */
}

.bar-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* 使条形图和标签水平居中 */
}

.bar {
  width: 100px; /* 假设条形图的宽度为50px */
  margin-bottom: 5px; /* 条形图和标签之间的间隔 */
}

.label {
  font-size: 14px; /* 标签的字体大小 */
  color: #333; /* 标签的文字颜色 */
}
</style>
<script>
import {listSTOCK, getSTOCK, delSTOCK, addSTOCK, updateSTOCK, updateSts, listsSTOCK} from "@/api/system/stock";

export default {
  name: "STOCK",
  dicts: ['kc_sts'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 【请填写功能名称】表格数据
      STOCKList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        wareDates: [],
        pageNum: 1,
        pageSize: 10,
        putinId: null,
        putinIdLine: null,
        locationId: null,
        CTL: null,
        goodsId: null,
        GropSc: null,
        BARCODE: null,
        shelvesNum: null,
        wgh: null,
        STS: null,
        productionDate: null,
        wareDate: null,
        REMARK: null,
        stockId: null,
        storageId: null,
        VERSION: null,
        storageMode: null,
        providerId: null,
        DOCCTNUMBER: null,
        goodsTypeid: null,
        GOODSVOLUME: null,
        occupyNum: null,
        areaId: null,
        noticeId: null,
        oriBill: null,
        customerId: null,
        goodsSku: null,
        locIdName: null,
        goodsName: null,
        boxType: null,
        packingNum: null,
        ProDucLotId: null,
        Whseloc: null,
        HIGH: null,
        PRICE: null,
        PROBLEM: null,
        orderNum: null,
        CUSTOMER: null,
        REMARK2: null,
        ONSHELFUSERID: null,
        PARTDESC: null,
        HASVOLUME: null,
        warehousingId: null,
        upgoodsId: null,
        BarCodeTpe: null,
        BarCodef: null,
        lx: null,
        netWeigh: null,
        stsErp: null,
        stsDj: null,
        SPECIFICATION: null,
        gltrp: null,
        goodsMeasureId: null,
        SAPMSG: null,
        VKBUR: null,
        KUNAG: null,
        ZVKBUR: null,
        ZKUNAG: null,
        ZSOURCE: null,
        QTBY1: null,
        QTBY2: null,
        QTBY3: null,
        QTBY4: null,
        QTBY5: null,
        QTBY6: null,
        searchValue: null,
        STNR: null,
        TRNO: null,
        ARTICLE: null,
        QTY: null,
        PO: null,
        SO: null,
        ITEM: null,
        ORDNO: null,
        CUSSIZE: null,
        ITNBR: null,
        ITDSC: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        stockId: [
          {required: true, message: "$comment不能为空", trigger: "blur"}
        ],
        putinId: [
          {required: true, message: "$comment不能为空", trigger: "blur"}
        ],
        locationId: [
          {required: true, message: "$comment不能为空", trigger: "blur"}
        ],
        goodsId: [
          {required: true, message: "$comment不能为空", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    rowStyle({row, rowIndex}) {
      if (row.sts === "0") {
        return {backgroundColor: '#c6f1aa'}; // 返回被点击行的样式
      } else if (row.sts === '1') {
        return {backgroundColor: '#ead6a3'};
      } else if (row.sts === '2') {
        return {backgroundColor: '#ec949b'};
      }
      return {}; // 返回其他行的默认样式
    },
    clickIce(con) {
      this.form.sts = con;
      this.$modal.confirm('修改数据的状态？').then(() => {
        // 使用箭头函数，确保 this 指向 Vue 实例
        updateSts({ locationId: this.locationId, status: this.form.sts }).then(response => {
          this.getList();
          this.dialogVisible = false;
        });
      }).catch(() => {
        // 用户点击了“否”或关闭了对话框
        console.log('用户取消了操作');
      });
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      const sumFields = ['shelvesNum', 'qty']; // 添加 qty 字段

      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
        } else if (sumFields.includes(column.property)) {
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ''; // 可以根据需要添加单位
          } else {
            sums[index] = ' ';
          }
        } else {
          sums[index] = ''; // 不需要合计的字段显示为空
        }
      });
      return sums;
    },

    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listsSTOCK(this.queryParams).then(response => {
        this.STOCKList = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        stockId: null,
        putinId: null,
        putinIdLine: null,
        storageId: null,
        areaId: null,
        locationId: null,
        goodsTypeid: null,
        goodsId: null,
        shelvesNum: null,
        REMARK: null,
        VERSION: null,
        storageMode: null,
        providerId: null,
        productionDate: null,
        wareDate: null,
        DOCCTNUMBER: null,
        GOODSVOLUME: null,
        occupyNum: null,
        noticeId: null,
        oriBill: null,
        CTL: null,
        BARCODE: null,
        customerId: null,
        goodsSku: null,
        locIdName: null,
        wgh: null,
        goodsName: null,
        boxType: null,
        packingNum: null,
        ProDucLotId: null,
        Whseloc: null,
        HIGH: null,
        STS: null,
        PRICE: null,
        PROBLEM: null,
        orderNum: null,
        CUSTOMER: null,
        REMARK2: null,
        ONSHELFUSERID: null,
        PARTDESC: null,
        HASVOLUME: null,
        warehousingId: null,
        upgoodsId: null,
        BarCodeTpe: null,
        BarCodef: null,
        GropSc: null,
        lx: null,
        netWeigh: null,
        stsErp: null,
        stsDj: null,
        SPECIFICATION: null,
        gltrp: null,
        goodsMeasureId: null,
        SAPMSG: null,
        VKBUR: null,
        KUNAG: null,
        ZVKBUR: null,
        ZKUNAG: null,
        ZSOURCE: null,
        QTBY1: null,
        QTBY2: null,
        QTBY3: null,
        QTBY4: null,
        QTBY5: null,
        QTBY6: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.stockId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    handleSelectionChange1(selection) {
      this.locationId = selection.map(item => item.locationId)
      this.ids = selection.map(item => item.orderId)
      this.single = selection.length !== 1
      this.multiple = !selection.length

    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加【请填写功能名称】";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const stockId = row.stockId || this.ids
      getSTOCK(stockId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改【请填写功能名称】";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.stockId != null) {
            updateSTOCK(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addSTOCK(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const stockIds = row.stockId || this.ids;
      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + stockIds + '"的数据项？').then(function () {
        return delSTOCK(stockIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });

    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/STOCK/export', {
        ...this.queryParams
      }, `库存信息${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
